<template>
  <page-header-wrapper :title="false" content="用户管理">
    <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
      <a-form class="ant-advanced-search-form" labelAlign="right">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item label="姓名">
              <a-input v-model="queryParam.receiverName" style="width: 100%" placeholder="请输入姓名" allowClear />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="手机号">
              <a-input v-model="queryParam.receiverPhone" style="width: 100%" placeholder="请输入手机号" allowClear />
            </a-form-item>
          </a-col>
          <a-col :span="6" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="handleSearch"> 查询 </a-button>
            <a-button :style="{ marginLeft: '8px' }" @click="reset"> 重置 </a-button>
          </a-col>
        </a-row>
      </a-form>
      <div class="content">
        <div class="table-header"></div>
        <div>
          <a-table
            :loading="loading"
            :columns="columns"
            :data-source="listData"
            rowKey="id"
            bordered
            :scroll="{ x: 2000 }"
            :pagination="pagination"
            @change="handleTableChange"
          >
            <span slot="price"> 198 </span>
            <span slot="address" slot-scope="text, record">
              {{ `${record.province}${record.city}${record.area}${record.address}` }}
            </span>
            <template slot="operation" slot-scope="text, record">
              <!-- <a ref="javascript:;" @click.stop="$refs.detail.showDrawer(record.id, 'edit')">编辑</a>
              <a-divider type="vertical" /> -->
              <a-popconfirm title="确定删除操作？" ok-text="确定" cancel-text="取消" @confirm="deleteItem(record)">
                <a ref="javascript:;" @click.stop="() => {}">删除</a>
              </a-popconfirm>
            </template>
          </a-table>
        </div>
      </div>
    </a-card>
    <detail @refresh="refresh" ref="detail" />
  </page-header-wrapper>
</template>

<script>
import Detail from './detail'
import { getUserList, deleteUser } from '@/api/user'
const columns = [
  {
    title: '姓名',
    dataIndex: 'receiverName',
    key: 'receiverName',
    ellipsis: true,
    width: 150,
  },
  {
    title: '手机号',
    dataIndex: 'receiverPhone',
    width: 150,
    key: 'receiverPhone',
  },
  {
    title: '金额',
    dataIndex: 'price',
    key: 'price',
    width: 100,
    scopedSlots: { customRender: 'price' },
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
    width: 200,
    scopedSlots: { customRender: 'address' },
  },
  {
    title: '留言',
    dataIndex: 'message',
    key: 'message',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 250,
    fixed: 'right',
    scopedSlots: { customRender: 'operation' },
  },
]
export default {
  components: {
    Detail,
  },
  data() {
    return {
      pagination: {},
      queryParam: {},
      listData: [],
      columns,
      loading: false,
    }
  },
  created() {
    this.getListData({ page: 1, page_size: 10 })
  },
  methods: {
    handleSearch(e) {
      e.preventDefault()
      this.getListData({ page: 1, page_size: 10 })
    },
    // 请求列表数据
    getListData(params = {}) {
      this.loading = true
      getUserList({
        ...params,
        ...this.queryParam,
      })
        .then((res) => {
          this.listData = res.data
          this.pagination = {
            total: res.total,
            pageNum: res.page,
            pageSize: res.page_size,
            showTotal: () => {
              return `共计${res.total}条`
            },
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 分页
    handleTableChange(pagination) {
      this.pagination = {
        pageNum: pagination.current,
        pageSize: pagination.pageSize,
      }
      this.getListData({
        page: pagination.current,
        page_size: pagination.pageSize,
      })
    },
    reset() {
      this.queryParam = {}
    },
    refresh() {
      this.getListData({ page: this.pagination.pageNum, page_size: this.pagination.pageSize })
    },
    deleteItem(record) {
      deleteUser(record.id).then(() => {
        this.$message.success('删除成功')
        if (this.listData.length === 1 && this.pagination.pageNum > 1) {
          this.pagination.pageNum -= 1
        }
        this.refresh()
      })
    },
    approval(record) {
      let data = {
        user_id_list: [record.id],
        is_active: true,
      }
      activateUser(data).then(() => {
        this.$message.success('操作成功')
        if (this.listData.length === 1 && this.pagination.pageNum > 1) {
          this.pagination.pageNum -= 1
        }
        this.refresh()
      })
    },
  },
}
</script>
<style lang="less" scoped>
.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#components-form-demo-advanced-search .ant-form {
  max-width: none;
}

#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}

.content {
  margin: 12px;

  .table-header {
    margin-bottom: 12px;
  }
}
</style>
